<template>
  <div style="display: flex;flex-direction: column;height:100%;width:100%;justify-content: space-between;">
    <div class="title">
      <el-image :src="require('@/assets/images/dataScreen/operationTitle.png')" style="width: 7px;height: 14px;margin-right: 10px"></el-image>
      <div>水质预警</div>
    </div>
    <div style="display: flex;height:90%;width:100%;flex-basis: 90%;flex-direction: column">
      <div style="display: flex;height:10%;width:100%;flex-basis: 10%;align-items: center;">
        <div class="lineLeft"></div>
        <el-image :src="require('@/assets/images/dataScreen/arrowLeft.png')" style="width:6px;height: 8px"></el-image>
        <div style="width:20%;font-size: 14px;color:rgba(166, 255, 255, 1);text-align: center">出厂水水质</div>
        <el-image :src="require('@/assets/images/dataScreen/arrowRight.png')" style="width:6px;height: 8px"></el-image>
        <div class="lineRight"></div>
      </div>
      <div style="display: flex;height:40%;width:100%;flex-basis: 40%;">
        <div style="display: flex;width:40%;flex-basis: 40%;"><today-count :dayProducedWaterQuality="dayProducedWaterQuality"/></div>
        <div style="display: flex;width:60%;flex-basis: 60%;"><factory-water-quality :dayProducedWaterQualityMonth="dayProducedWaterQualityMonth"/></div>
      </div>
      <div style="display: flex;height:10%;width:100%;flex-basis: 10%;align-items: center;">
        <div class="lineLeft"></div>
        <el-image :src="require('@/assets/images/dataScreen/arrowLeft.png')" style="width:6px;height: 8px"></el-image>
        <div style="width:20%;font-size: 14px;color:rgba(166, 255, 255, 1);text-align: center">末梢水水质</div>
        <el-image :src="require('@/assets/images/dataScreen/arrowRight.png')" style="width:6px;height: 8px"></el-image>
        <div class="lineRight"></div>
      </div>
      <div style="display: flex;height:40%;width:100%;flex-basis: 40%;">
        <div style="display: flex;width:40%;flex-basis: 40%;"><tomorrow-count :dayTabWaterQuality="dayTabWaterQuality"/></div>
        <div style="display: flex;width:60%;flex-basis: 60%;"><terminal-water-quality :dayTabWaterQualityMonth="dayTabWaterQualityMonth"/></div>
      </div>
    </div>
<!--    <div>-->
<!--      <today-count />-->
<!--    </div>-->
<!--    <div>-->
<!--      <tomorrow-count />-->
<!--    </div>-->
<!--  </div>-->
    </div>
</template>

<script>

import todayCount from "@/views/dataScreen/wateralert/todayAlertCount.vue";
import tomorrowCount from "@/views/dataScreen/wateralert/tomorrowAlertCount.vue";
import factoryWaterQuality from "@/views/dataScreen/wateralert/factoryWaterQuality.vue";
import terminalWaterQuality from "@/views/dataScreen/wateralert/terminalWaterQuality.vue";
import {getWaterQuality} from '@/api/ht/dataScreen'
// const halfCycleChart = ()=> import('./wateralert/todayAlertCount.vue');
export default {
  name: "waterWarning",
  components:{
    todayCount,
    tomorrowCount,
    factoryWaterQuality,
    terminalWaterQuality
  },
  data(){
    return{
      dayProducedWaterQuality:'',
      dayProducedWaterQualityMonth:'',
      dayTabWaterQuality:'',
      dayTabWaterQualityMonth:'',
      timer:null,
    }
  },
  mounted(){
    let that=this
    that.getWaterQualityList()
    that.timer=setInterval(function(){
      that.getWaterQualityList()
    },10000)
  },
  methods:{
    getWaterQualityList(){
      getWaterQuality().then(res =>{
        this.dayProducedWaterQuality=res.data.dayProducedWaterQuality
        this.dayProducedWaterQualityMonth=res.data.dayProducedWaterQualityMonth
        this.dayTabWaterQuality=res.data.dayTabWaterQuality
        this.dayTabWaterQualityMonth=res.data.dayTabWaterQualityMonth
      })
    }
  },
  beforeDestroy(){
    clearInterval(this.timer)
    this.timer=null
  }
}
</script>

<style lang="scss" scoped >
.title{
  display: flex;
  height: 10%;
  flex-basis: 10%;
  color:white;
  font-size: 18px;
  font-weight: 700;
  align-items: center;
  //justify-content: center;
}
.main{
  display: flex;
  height: 90%;
  flex-basis: 90%;
  color:white;
  font-size: 14px;
  align-items: center;

}
.lineLeft{
  width: 40%;
  height: 1px;
  border: 1px solid;
  border-image: linear-gradient(-90deg, #228AFF, #000000) 10 10;
  background: linear-gradient(-90deg, #228AFF 0%, #000000 100%);
}
.lineRight{
  width: 35%;
  height: 1px;
  border: 1px solid;
  border-image: linear-gradient(-90deg,  #000000,#228AFF) 10 10;
  background: linear-gradient(-90deg, #000000 100%, #228AFF 0%);
}
</style>
